import React from 'react'
import {Card, Table, Modal} from 'antd'
// import axios from 'axios'
import axios from '../../../axios'
import utils from "../../../utils/utils";
export default class BasicTable extends React.Component{
    constructor(){
        super();
        this.state = {
            dataSource: [],
            dataSource2: [],
            selectedRowKeys: '',
            selectedItem: ''
        }
    }
    params = {
        page:1
    }
    componentDidMount() {
        const dataSource = [
            {
                idx:1,
                name:'jack',
                age:'18',
            },
            {
                idx:2,
                name:'tony',
                age:'19',
            },
            {
                idx:3,
                name:'mary',
                age:'17',
            }
        ]
        dataSource.map((item, index) => {
            item.key = index
        })
        this.setState({
            dataSource
        })
        this.request()
    }

    request(){
        /*let baseUrl = 'https://easy-mock.com/mock/5cb7e5cac9d7e64fb56011dd/mockapi'
        axios.get(baseUrl+'/table/list').then((rep) => {
            console.log(rep)
            if(rep.status == 200){
                this.setState({
                    dataSource2:rep.data.result
                })
            }

        })*/
        var _this = this
        axios.ajax({
            url:'/table/list',
            data:{
                page:this.params.page
            }
        }).then((res)=>{
           const dataSource2 = res.result.list
            dataSource2.map((item, index) => {
                item.key = index
            })
            this.setState({
                dataSource2,
                pagination:utils.pagination(res, (current) => {
                    _this.params.page = current
                    _this.request()
                })
            })
        })
    }

    onRowClick = (row, index) => {
        console.log(row, index)
        Modal.info({
            title:'用户',
            content:`用户id ${row.idx} 姓名 ${row.username}`
        })
        let  selectedRowKeys = [index]
        this.setState({
            selectedRowKeys,
            selectedItem: row
        })

    }

    render() {

        const columns = [
            {
                title: 'id',
                dataIndex: 'idx',
            },
            {
                title: '姓名',
                dataIndex: 'name',
            },
            {
                title: '年龄',
                dataIndex: 'age',
            },
        ]
        const columns2 = [
            {
                title: 'id',
                dataIndex: 'idx',
            },
            {
                title: '姓名',
                dataIndex: 'username',
            },
            {
                title: '年龄',
                dataIndex: 'age',
            },
        ]

        const {selectedRowKeys} = this.state
        const rowSelection = {
            type:'radio',
            selectedRowKeys
        }
        const {checkedRowKeys} = this.state
        const rowCheckSelection = {
            type:'checkbox',
            selectedRowKeys:checkedRowKeys,
            onChange: (selectedRowKeys, selectedRows)=>{
                console.log('选中的')
                console.log(selectedRows)
                this.setState({
                    checkedRowKeys:selectedRowKeys,
                    selectedRows,
                })
            }
        }
        return <div>
                <Card title={'基础表格'}>
                    <Table
                        dataSource={this.state.dataSource}
                        columns={columns}
                        // pagination={false}
                    />
                </Card>
            <Card title={'动态表格-mock'} style={{margin:'10px 0'}}>
                <Table
                    dataSource={this.state.dataSource2}
                    columns={columns2}
                    // pagination={false}
                />
            </Card>
            <Card title={'动态表格-mock单选'} style={{margin:'10px 0'}}>
                <Table
                    dataSource={this.state.dataSource2}
                    columns={columns2}
                    rowSelection = {rowSelection}
                    // pagination={false}

                    onRow={(record, index) => {
                        return {
                            onClick: ()=>{
                                this.onRowClick(record, index)
                            },       // 点击行
                        };
                    }}
                />
            </Card>
            <Card title={'动态表格-mock多选'} style={{margin:'10px 0'}}>
                <Table
                    bordered={true}
                    dataSource={this.state.dataSource2}
                    columns={columns2}
                    rowSelection = {rowCheckSelection}
                    // pagination={false}

                    onRow={(record, index) => {
                        return {
                            onClick: ()=>{
                                this.onRowClick(record, index)
                            },       // 点击行
                        };
                    }}
                />
            </Card>
            <Card title={'动态表格-mock分页'} style={{margin:'10px 0'}}>
                <Table
                    bordered={true}
                    dataSource={this.state.dataSource2}
                    columns={columns2}
                    pagination={this.state.pagination}
                />
            </Card>
        </div>
    }
}
